//   帮助中心
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { Select, Form, Input, Button, message, Upload } from 'antd';
import React from 'react';
import { useState } from 'react'
import './feedback.scss';
import type { UploadChangeParam } from 'antd/es/upload';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
const { Option } = Select;
// select选择框
const handleChange = (value: { value: string; label: any }) => {
    console.log(value); // { value: "lucy", key: "lucy", label: "Lucy (101)" }
};
// 意见反馈
const layout = {
    labelCol: { span: 2 },
    wrapperCol: { span: 16 },
};
//   图片上传
const getBase64 = (img: RcFile, callback: (url: string) => void) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result as string));
    reader.readAsDataURL(img);
};
const beforeUpload = (file: RcFile) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
        message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
};
// 提交表单触发
const HelpCenter = () => {
    const onFinish = (values: any) => {
        console.log(888);

        console.log(values.introduction);
    };
    // 图片上传
    const [loading, setLoading] = useState(false);
    const [imageUrl, setImageUrl] = useState<string>();

    const updata: UploadProps['onChange'] = (info: UploadChangeParam<UploadFile>) => {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj as RcFile, url => {
                setLoading(false);
                setImageUrl(url);
            });
        }
    };

    const uploadButton = (
        <div>
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div style={{ marginTop: 8 }}>图片上传</div>
        </div>
    );
    const normFile = (e: any) => {
        console.log('Upload event:', e);
        if (Array.isArray(e)) {
            return e;
        }
        return e && e.fileList;
    };
    return <div className='box'>

        <div className='top_feedback'>
            <i></i>
            <span>问题反馈</span>
        </div>
        {/* 主体盒子 */}
        <div className='content'>
            {/* 选择那个建议模块 */}
            <div className='panal'>
                <label>所在页面:</label>
                <Select
                    labelInValue
                    bordered={false}
                    defaultValue={{ value: 'IOC质量管理看板', label: 'IOC质量管理看板' }}
                    style={{ width: 300, border: '1px solid #000', borderRadius: 10, marginLeft: 10 }}
                    onChange={handleChange}
                >
                    <Option value="首页">首页</Option>
                    <Option value="今日检验进度看板">今日检验进度看板</Option>
                    <Option value="IOC质量管理看板">IOC质量管理看板</Option>
                </Select>
            </div>
            {/* 意见描述 */}
            <div className='proposal'>
                <Form {...layout} name="nest-messages" onFinish={onFinish}>
                    <Form.Item name={['introduction']} label="意见描述:">
                        <Input.TextArea />
                    </Form.Item>
                    {/* 图片上传 */}
                    <Form.Item valuePropName="fileList"
                        getValueFromEvent={normFile} name={['update']} label="上传图片:">
                        <Upload
                            name="avatar"
                            listType="picture-card"
                            className="avatar-uploader"
                            showUploadList={false}
                            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                            beforeUpload={beforeUpload}
                            onChange={updata}
                        >
                            {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                        </Upload>
                    </Form.Item>
                    <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 11 }}>
                        <Button style={{ marginTop: 40 }} type="primary" htmlType="submit">
                            提交
                        </Button>
                    </Form.Item>
                </Form>
            </div>

        </div>
    </div>
}
export default HelpCenter